<template>
    <div class="card">
        <n-grid :cols="4">
            <n-gi v-for="item in CLASS_LIST" :key="item.id">
                <n-card>
                    <template #cover>
                        <img :src="item.img" />
                    </template>
                    <div class="card_buttom">
                        <n-button  ghost color="#8a2be2" @click="handleDetail(item.id)">查看详情</n-button>
                        <n-button type="info" color="#ff69b4" ghost @click="handleShop(item.id)">立即购买</n-button>
                    </div>
                </n-card>
            </n-gi>
        </n-grid>
    </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { mapState } from  'vuex';
  export default defineComponent({
    name: 'card',
    computed: mapState([
      // map this.count to store.state.count
      'CLASS_LIST',
      'TOKEN'
    ]),
    setup() {
      return {

      }
    },
    methods: {
      /**
       * 查看详情
       * @param id
       */
      handleDetail(id) {
        const isLogin = this.checkIfLogin();
        if(!isLogin) window.$message.error("未登录或登录异常,请重新登录");
        else window.$message.success("登录成功");
      },
      /**
       * 是否购买
       * @param id
       */
      handleShop(id) {
        const isLogin = this.checkIfLogin();
        if(!isLogin) window.$message.error("未登录或登录异常,请重新登录");
        else   window.$router.push(`/video/${id}`)

      },
      /**
       * 检查 TOEKEN 是否异常
       */
      checkIfLogin() {
        const token = this.TOKEN;
        if(token === '' || undefined || null) return false;
        else {
        //  1. 发送axios 验证 Token 是否过期
          if(token === '123') return true;
          else  return false;
        }
      }
    }
  });
</script>

<style lang="scss" scoped>
    .card {
        position: relative;
        margin: 0 auto;
        height: 800px;
        .n-card {
            max-width: 240px;
            margin-top: 20px;
            .n-page-header {
                background-color: #fff;
                height: 50px;
                line-height: 50px;
            }
            .card_buttom {
                display: flex !important;
                margin-top: 8px;
                padding: 0;
                justify-content: space-between;
            }
        }
    }
</style>
